
import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import Header from '@/components/header/header';
import Footer from '@/components/footer/footer';
import ShopList from '@/components/shop_list/shop_list';
import Apis from '../../api/api';
import Swiper from 'swiper/dist/js/swiper.js';
import Loader from '@/components/loader/loader'
import 'swiper/dist/css/swiper.css';
import { saveAttrInfo } from '@/store/action';
import PropTypes from 'prop-types';
import Animation from './animation';
import FooterItem from './footerItem';
import { imgBaseUrl } from '@/constan/miste'
import './msite.scss'
class Miste extends Component {
  static propTypes = {
    saveAttrInfo: PropTypes.func.isRequired
  }
  state = {
    geohash: [],
    footTypes: [],
    title: '',
    text: 'fff',
    imgBaseUrl: imgBaseUrl
  }
  getFoodTypes = async () => {
    let data = {
      geohash: this.state.geohash,
      'flag[]': 'F',
      group_type: 1
    };
    let res = await Apis.getFoodTypes(data);
    let resLength = res.resLength;
    let resArr = [...res];
    let foodArr = []
    for (let i = 0, j = 0; i < resLength; i += 8, j++) {
      foodArr[j] = resArr.splice(0, 8)
    }

    this.setState({
      footTypes: foodArr
    })
    new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination'
      },
      loop: true
    })
  };

  goHome = () => {
    this.props.history.push('/');
  }
  componentDidMount() {
    this.cityGuess()
  }
  getCategoryId = (url) => {
    let urlData = decodeURIComponent(url.split('=')[1].replace('&target_name', ''));
    if (/restaurant_category_id/gi.text(urlData)) {
      return JSON.parse(urlData).restaurant_category_id.id;
    } else {
      return 270
    }
  }
  getPosiSite = async (geohash) => {
    let res = await Apis.getPoisSite(geohash);
    console.log(res);
    this.setState({
      title: res.name
    })
  }
  cityGuess = async () => {
    let res = await Apis.cityGuess();
    console.log(res);
    const arr = [res.latitude, res.longitude];
    this.setState({
      geohash: arr
    })
    this.props.saveAttrInfo('geohash', arr);
    this.getPosiSite(arr);
    this.getFoodTypes()
  }

  render() {
    return <Fragment>
      <Header title={this.state.title} signUp={true} goHome={this.goHome} />
      <nav className='moste-nav'>
        <div className='swiper-container'>
          <div className='swiper-wrapper'>
            {
              !this.state.footTypes.length && <FooterItem />
            }
            {
              this.state.footTypes.map((foodItem, i) => {
                return <div className='swiper-slide food-type-container' key={i}>
                  {
                    foodItem.map((v, index) => {
                      return <Link to={`/food/${this.state.geohash}/${this.getCategoryId(v.link)}/${v.title}`} key={index}>
                        <img src={this.state.imgBaseUrl + v.image_url} alt="" />
                        <span>{v.title}</span>
                      </Link>
                    })
                  }
                </div>
              })
            }
          </div>
          <div className='swiper-pagination'></div>
        </div>
      </nav>
      <div className='shop-list-container'>
        <header className='shop-header'>
          <div className='icon-shangedian'></div>
          <span className='shop-header-title'>附近商家</span>
        </header>
        {
          this.state.footTypes.length ? <ShopList geohash={this.state.geohash} /> : <Animation />
        }
      </div>
      {
        !this.state.footTypes.length ? <div className='site-loader'>
          <Loader ></Loader>
        </div> : ''
      }
      <Footer />
    </Fragment>
  }
}
export default connect(() => ({}), (dispatch) => {
  return {
    saveAttrInfo: (attr, value) => {
      dispatch(saveAttrInfo(attr, value))
    }
  }
})(Miste)